<!DOCTYPE html>
<html lang="en">
<head xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
    <meta charset="utf-8">

    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="vendor/vis/dist/vis.min.css">
    <script src="vendor/vis/dist/vis.min.js"></script>
    <script src="vendor/d3/d3-3.3.4.js"></script>

    <style type="text/css">
        .vis.timeline .item {
            padding: 0px;
        }

        .vis.timeline .labelset .vlabel .inner {
            padding: 0px;
        }

        .vis.timeline .item.range {
            height: 3px;
        }

        .vis.timeline .red {
            background-color: #F2DEDE;
            border-color: #F2AEAE;
        }

        .vis.timeline .green {
            background-color: #DFF0DB;
            border-color: #B8F0AA;
        }

        .vis.timeline .blue {
            background-color: #E3E9FC;
            border-color: #B0C3FC;
        }

        .vis.timeline .orange {
            background-color: #FFA500;
            border-color: #B0C3FC;
        }

        #legend {
            padding: 10px 40px
        }

        #legend .bar {
            border-style: solid;
            border-width: 1px;
            width: 350px;
            height: 4px;
        }

        #legend .text {
            margin-left: -20px;
        }

        #legend .red {
            background-color: #F2DEDE;
            border-color: #F2AEAE;
        }

        #legend .green {
            background-color: #DFF0DB;
            border-color: #B8F0AA;
        }

        #legend .blue {
            background-color: #E3E9FC;
            border-color: #B0C3FC;
        }

        #legend .orange {
            background-color: #FFA500;
            border-color: #B0C3FC;
        }

        #legend .empty {
            border-style: none;
        }

        #legend > div {
            display: inline-block;
        }
    </style>
</head>

<body>


<div class="container">
    <div class="page-header">
        <h1>PolarDBX :: Query <span id="queryId"></span></h1>
    </div>

    <h2>Timeline</h2>

    <div id="legend">
        <div>
            <div class="red bar"></div>
            <div class="text">Created</div>
        </div>
        <div>
            <div class="green bar"></div>
            <div class="text">First split started</div>
        </div>
        <div>
            <div class="bar empty"></div>
            <div class="text">Ended</div>
        </div>
    </div>
    <div id="timeline"></div>
</div>

</body>

<script>
    d3.json('/v1/query/' + window.location.search.substring(1), function (query) {
        d3.select('#queryId').text(query.queryId);
        renderTimeline(query);
    });

    function renderTimeline(data) {
        function getTasks(stage) {
            return [].concat.apply(
                stage.tasks,
                stage.subStages.map(getTasks));
        }

        tasks = getTasks(data.outputStage);
        tasks = tasks.map(function (task) {
            return {
                taskId: task.taskStatus.taskId.substring(task.taskStatus.taskId.indexOf('.') + 1),
                time: {
                    create: task.stats.createTime,
                    firstStart: task.stats.firstStartTime,
                    end: task.stats.endTime,
                },
            };
        });

        var groups = new vis.DataSet();
        var items = new vis.DataSet();
        for (var i = 0; i < tasks.length; i++) {
            var task = tasks[i];
            var stageId = task.taskId.substr(0, task.taskId.indexOf("."));
            var taskNumber = task.taskId.substr(task.taskId.indexOf(".") + 1);
            if (taskNumber == 0) {
                groups.add({
                    id: stageId,
                    content: stageId,
                    sort: stageId,
                    subgroupOrder: 'sort',
                });
            }
            items.add({
                group: stageId,
                start: task.time.create,
                end: task.time.firstStart,
                className: 'red',
                subgroup: taskNumber,
                sort: -taskNumber,
            });
            items.add({
                group: stageId,
                start: task.time.firstStart,
                end: task.time.end,
                className: 'green',
                subgroup: taskNumber,
                sort: -taskNumber,
            });
        }

        var options = {
            stack: false,
            groupOrder: 'sort',
            padding: 0,
            margin: 0,
            clickToUse: true,
        };

        var container = document.getElementById('timeline');

        var timeline = new vis.Timeline(container, items, groups, options);
    }
</script>
</html>
